import React from 'react'
import './Header.css'
import { Input } from 'antd'
import { useNavigate } from 'react-router';

export default function Header() {
  const navigate = useNavigate();
  return (
    <div id='header'>
      <Input size="large" placeholder="搜索" prefix={
        <img src='src/components/Header/images/search.png' />
      } />
      <span className='user'>
        <span className='message_icon' onClick={()=>{
          navigate('/message')
          sessionStorage.clear();
          sessionStorage.setItem('activeMenu', 'message');
        }}>
          <img src='src/components/Header/images/message.png' />
        </span>
        <span className='mail_icon' onClick={()=>{
          navigate('/mail')
          sessionStorage.clear();
          sessionStorage.setItem('activeMenu', 'mail');
        }}>
          <img src='src/components/Header/images/mail.png' />
        </span>
        <img className='profile_picture' onClick={()=>{
          navigate('/user')
          sessionStorage.setItem('activeMenu', 'setting');
          sessionStorage.setItem('activeSubMenu', 'user');
        }} src='https://img1.baidu.com/it/u=728383910,3448060628&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1739552400&t=29f79857491e85fcf616853c359ac893' />
        <span className='user_info' onClick={()=>{
          navigate('/user')
          sessionStorage.setItem('activeMenu', 'setting');
          sessionStorage.setItem('activeSubMenu', 'user');
        }}>
          <span className='username'>王向东</span>
          <span className='email'>243654654555@qq.com</span>
        </span>
      </span>
    </div>
  )
}
